<template>
  <div>
    <h2>Fax</h2>
    <button @click="edit">Edit</button>
    <p v-if="!editMode">{{ info }}</p>
    <input
      v-else
      type="text"
      v-model="input"
      v-focus
      @keyup.enter="edit"
      @keyup.esc="$event.target.value = ''"
    />
  </div>
</template>

<script>
export default {
  deactivated() {
    this.editMode = false;
    this.input = "";
  },
  methods: {
    edit() {
      if (this.editMode && !this.input) {
        alert("输入不能为空！");
        return;
      }
      this.editMode = !this.editMode;
      if (this.editMode) this.input = this.info;
      else this.info = this.input;
    },
  },
  data() {
    return {
      editMode: false,
      info: "555-999-9999",
      input: "",
    };
  },
  directives: {
    focus: {
      inserted(el) {
        el.focus();
      },
    },
  },
};
</script>

<style>
input {
  display: block;
}
</style>